<template>
  <el-form-item prop="advertiserId">
    <div class="w-full">
      <div class="flex flex-col w-[300px] relative box">
        <div class="w-full">
          <el-select
            ref="accountSelectRef"
            v-model="form.advertiserId"
            filterable
            popper-class="single-select-loadmore"
            remote
            :remote-method="remoteMethod"
            placeholder="请选择广告帐户"
            v-load-more="loadMoreData"
            @change="handleChange"
          >
            <el-option v-for="(item, index) in accountList" :key="index" :value="item.advertiserId" :label="item.advertiserName"></el-option>
            <div class="flex justify-center w-full">
              <div class="loading" v-if="accountLoading">
                <svg class="circular" viewBox="0 0 50 50">
                  <circle class="path" cx="25" cy="25" r="20" fill="none" />
                </svg>
              </div>
            </div>
          </el-select>
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { AaccountAdvertiserQuery, AaccountAdvertiserVO } from '@/api/advertisement/account/types';
import { getAccountAdvertiserList } from '@/api/advertisement/account';

import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();

const props = defineProps({
  modelValue: propTypes.string.isRequired,
  width: propTypes.string.def('400px')
});

const emit = defineEmits(['update:modelValue']);
const visible = ref(false);
const { modelValue, width } = toRefs(props);

const filterValue = ref('');
const accountList = ref<AaccountAdvertiserVO[]>([]);
const accountLoading = ref(false);
const accountIsEnd = ref(false);

type StepVO = {
  advertiserId: number;
  tagInfo: string;
  curSelectCateInfo?: {
    categoryId: number;
    categoryName: string;
  };
  categoryIndex?: number;
  subCategoryIndex?: number;
  thirdCategoryIndex?: number;
};

const initForm: StepVO = {
  advertiserId: null,
  tagInfo: null
};
const data = reactive<PageData<StepVO, AaccountAdvertiserQuery>>({
  form: { ...initForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    accountId: appStore.accountId,
    advertiserName: ''
  },
  rules: {
    advertiserId: [{ required: true, message: '请选择账户', trigger: 'change' }]
  }
});

const { form, queryParams, rules } = toRefs(data);
const handleChange = (val: number) => {
  emit('update:modelValue', val);
};
const remoteMethod = (query: string) => {
  accountList.value = [];
  queryParams.value.pageNum = 1;
  if (query) {
    queryParams.value.advertiserName = query;
    setTimeout(async () => {
      getMoreData();
    }, 200);
  } else {
    queryParams.value.advertiserName = '';
    setTimeout(async () => {
      getMoreData();
    }, 200);
  }
};
const loadMoreData = () => {
  if (accountIsEnd.value || accountLoading.value) return;
  queryParams.value.pageNum += 1;
  getMoreData();
};

/**
 * 下拉狂获取更多账户
 */
const getMoreData = async () => {
  accountLoading.value = true;
  try {
    const res = await getAccountAdvertiserList(queryParams.value);
    accountList.value.push(...res.rows);
  } finally {
    accountLoading.value = false;
  }
};
onMounted(async () => {
  await getMoreData();
  form.value.advertiserId = accountList.value[0]?.advertiserId;
  emit('update:modelValue', form.value.advertiserId);
});
</script>

<style scoped lang="scss">
.el-scrollbar {
  max-height: calc(50vh - 100px) !important;
  overflow-y: auto;
}
.el-divider--horizontal {
  margin: 10px auto !important;
}
.icon-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  margin-top: 10px;

  .icon-item {
    cursor: pointer;
    width: 10%;
    margin: 0 10px 10px 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    border: 1px solid #ccc;
    &:hover {
      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
      transition: all 0.2s;
      transform: scaleX(1.1);
    }
  }
  .active {
    border-color: var(--el-color-primary);
    color: var(--el-color-primary);
  }
}
</style>
